The problem came about that browser's were breaking on words unnecessarily (in Firefox and IE11). The problem is that neither Firefox nor IE support word-break: break-word and so there is a fallback to word-break: break-all to ensure that long words don't expand past container.

What it looked like before:

So this PR changes from using the word-break: break-word approach to using overflow-wrap: break-word which is supported by all browsers except for IE11 and behaves just like word-break.

This is what it looks like now:

Helpers

I've added both a mixin (euiTextOverflowWrap()) and CSS utility (.eui-textOverflowWrap) to handle the ease of using overflow-wrap and the IE fallback.

Caveat

There is one big caveat to using overflow-wrap. It does not work on items that have display: flex. Wah wah...

Where this becomes an issue is when passing textOnly: false to EuiTableRowCell which removes the containing .euiTableCellContent__text and places the children as a direct descendent of euiTableCellContent which, guess what?, is display: flex. 😢

So it has to use the word-break implementation, meaning it will also use the break-all fallback for Firefox.

This usually isn't an issue because the default prop is textOnly: true. However, EuiBasicTable will turn that prop to false if you use the render function.

What it looks like when textOnly: false:

Firefox will still break on all because the containing element is a flex element.

I've updated the documentation to try to spell out how to fix this, usually by keeping/adding textOnly: true. But another way to combat this is to just wrap the text node with the .eui-textOverflowWrap utility class.

IE11

Blech. Unfortunately, IE11 has no support any type of break-word so it will continue to use the break-all fall back.

Checklist

• [ ] This was checked in mobile
• This was checked in IE11
• [ ] This was checked in dark mode
• Any props added (modified) have proper autodocs
• Documentation examples were added (modified)
• A changelog entry exists and is marked appropriately
• [ ] This was checked for breaking changes and labeled appropriately
• [ ] Jest tests were updated or added to match the most common scenarios
• [ ] This was checked against keyboard-only and screenreader scenarios
• [ ] This required updates to Framer X components